<template>
  <div class="comment-item">
    <div class="user-avatar">
      <el-avatar :size="35" :src="comment.avatar | filterImg"></el-avatar>
    </div>
    <div class="user-content">
      <div class="username">
        {{ comment.username }}
      </div>
      <pre class="content" v-text="comment.content">
        11111
      </pre>
      <div class="status">
        <span>{{ comment.createTime | datetimeFilter }}</span>
        <span class="praise">
          <i class="el-icon-third-praise"></i>2233
        </span>
        <el-button style="margin-right: 10px" size="small" @click="showReplyInput">回复</el-button>
        <el-badge :value="comment.replyAmount" class="item" v-if="replyDialogVisible">
          <el-button size="small" type="primary" @click="$emit('openReplyDialog',comment)">查看回复</el-button>
        </el-badge>
      </div>
      <div class="reply-text" v-if="replyInputVisible">
        <el-input
            type="textarea"
            class="content"
            placeholder="请开始你的表演..."
            maxlength="200"
            :autosize="{minRows:3}"
            show-word-limit
            resize="none"
            v-model="replyContent">
        </el-input>
        <div class="reply-btn">
          <el-button style="float: right" class="" type="primary" size="small">回复</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "CommentItem",
  props: {
    comment: Object,
    replyDialogVisible: true
  },
  data() {
    return {
      replyInputVisible: false,
      replyContent: ''
    }
  },
  methods: {
    showReplyInput() {
      this.$emit('closeReplyInput');
      this.replyInputVisible = true
    }
  }
}
</script>

<style scoped>
.comment-item {
  border-bottom: 1px solid #ececec;
  padding: 16px;
  display: flex;
}

.user-content {
  margin: 0 20px;
  width: 100%;
}

.user-content .content {
  margin: 8px 0;
  max-width: 100%;
  word-break: break-all;
  color: #666666;
  font-size: 14px;
}

.user-content .username {
  margin-top: 7px;
  font-size: 13px;
  color: #fb749d;
  font-weight: bold;
}

.user-content .status {
  margin-top: 7px;
  font-size: 13px;
  color: #99a2aa;
  float: right;
  display: flex;
  align-items: center;
}

.user-content .status::after {
  content: '';
  display: block;
  clear: both;
  margin-bottom: 10px;
}

span.praise:hover .el-icon-third-praise {
  color: #5cb6ff;
}

.status span {
  margin-right: 30px;
}

span.praise {
  cursor: pointer;
}

.status >>> .el-button {
  padding: 4px 8px !important;
}

.reply-text {
  margin-top: 50px;
  padding: 15px;
  background-color: #f7f8fc;
}

.reply-text .reply-btn {
}

.reply-text .reply-btn::after {
  content: '';
  display: block;
  clear: both;
}
</style>
